<template>
  <view class="wh_750 flex flex-column align-center bg_F5F5F5 pageHeight">
    <!--  头部添加照片  -->
    <s-header-title ref="headerTitle" :isShowHome="page.options.is_share == 1 && page.options.is_detail != 1"
                    :isDisplayBack="page.options.is_share != 1 || page.options.is_detail == 1" title="详情" is-fixed
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight" z-index="10">
      <template>
        <view class="photoDetails_headerTitle" v-if="!page.options.is_genealogy">
          <text class="photoDetails_headerTitle_text" v-if="page.options.is_share != 1">
            {{
              page.options.is_flag != 1 ? family.detail.name : !!page.options.name ? page.options.name : '暂无家庭名称'
            }}
          </text>
          <text class="photoDetails_headerTitle_text" v-else>
            {{
              page.options.is_flag != 1 ? page.options.shareName : page.options.name
            }}
          </text>
        </view>
      </template>
    </s-header-title>
    <view :style="{height:`${page.headHeight}px`}"></view>
    <view class="photoDetails_browseImage mt_25 flex align-center justify-center">
      <swiper class="photoDetails_browseImage_swiper" style="height: 900rpx !important;"
              :current="page.selectImageCurrent" @change="swiperImageChange">
        <swiper-item class="flex align-center justify-center" style="height: 900rpx !important;"
                     v-for="(item,index) in family.imagesList" :key="index">
          <image :src="item.image" mode="aspectFit"
                 style="width: 100%;will-change: transform;height: 100%;"
                 @click="previewImage(index)"
          ></image>
        </swiper-item>
      </swiper>
    </view>
    <!-- 照片缩略列表 -->
    <view class="photoDetails_scrollView mt_20 " v-if="page.options.is_share != 1">
      <view class="photoDetails_scrollView_all flex align-center justify-between mb_20">
        <image :src="`${sq_image_path}/index/arrow_right.png`" class="photoDetails_scrollView_all_leftImage"></image>
        <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                     class="photoDetails_scrollView_all_content" scroll-with-animation>
          <view class="flex align-end">
            <view class="photoDetails_scrollView_all_content_photoContent_list flex align-center justify-center"
                  :style="{
              width: page.selectImage == index ? '80rpx' : '60rpx',
              height: page.selectImage == index ? '80rpx' : '60rpx'
            }" :id="page.selectImage == index  ? 'photoDetails_scrollView_all_content_photoContent_list':''"
                  v-for="(item,index) in family.imagesList"
                  :key="index" @click.stop="selectImageChange(index)">
              <image class="photoDetails_scrollView_all_content_photoContent_list_image" :style="{
              width: page.selectImage == index ? '80rpx' : '60rpx',
              height: page.selectImage == index ? '80rpx' : '60rpx'
            }" :src="item.image"
                     mode="aspectFill"></image>
            </view>
          </view>
        </scroll-view>
        <image :src="`${sq_image_path}/index/arrow_right.png`" class="photoDetails_scrollView_all_rightImage"></image>
      </view>
    </view>
    <view class="photoDetails_details">
      <view class="photoDetails_details_setCover flex align-center justify-center mt_30" @click.stop="setCover"
            v-if="page.options.is_flag == 1 && page.options.is_share != 1">
        <text class="photoDetails_details_setCover_text">{{
            photo.detail.person_cover == 1 ? '取消个人封面' : '设为个人封面'
          }}
        </text>
      </view>
      <view class="photoDetails_details_setCover flex align-center justify-center mt_30" @click.stop="setCover"
            v-if="page.options.is_flag != 1 && page.options.is_share != 1">
        <text class="photoDetails_details_setCover_text">{{
            photo.detail.family_cover == 1 ? '取消家庭封面' : '设为家庭封面'
          }}
        </text>
      </view>
      <view class="photoDetails_details_bottom mt_12 flex justify-between align-center">
        <view class="photoDetails_details_bottom_left">
          <view class="photoDetails_details_bottom_left_name flex align-center mt_12">
            <text class="photoDetails_details_bottom_left_name_text">
              发布人：{{ photo.detail.create_username || photo.detail.remark }}
            </text>
            <view class="photoDetails_details_bottom_left_name_label flex align-center justify-center ml_6"
                  v-if="!!photo.detail.username && photo.detail.remark">
              <text class="photoDetails_details_bottom_left_name_label_text">{{ photo.detail.remark }}</text>
            </view>
          </view>
          <view class="photoDetails_details_bottom_left_time flex align-center mt_7" v-if="page.options.is_share != 1">
            <view class="photoDetails_details_bottom_left_time_content">
              <text class="photoDetails_details_bottom_left_time_content_text">
                {{ dayjs(photo.detail.createtime * 1000).format('YYYY年MM月DD日 HH:mm:ss') }}
              </text>
            </view>
            <view class="photoDetails_details_bottom_left_time_delete ml_14" @click.stop="deleteCover">
              <text class="photoDetails_details_bottom_left_time_delete_text">删除</text>
            </view>
          </view>
        </view>
        <view class="photoDetails_details_bottom_right flex align-center" v-if="page.options.is_share != 1">
          <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center  mr_57"
                style="position: relative;"
                @click="photoLikes">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   :src="photo.detail.is_like != 1 ? `${IMG_URL}/index/thumbsUp.png`:`${IMG_URL}/index/thumbsUp_select.png`"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">爱心 {{ photo.detail.like_count }}
            </text>
            <image :src="`${IMG_URL}/index/dianzan_gif.gif`" v-if="photo.detail.showGif" class="gif"></image>
          </view>
          <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center mr_57"
                @click="albumReviews">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   :src="`${IMG_URL}/index/jiating_gengduoIcon.png`"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">评论 {{ photo.detail.comment_count }}</text>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center" style="position: relative">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
            <button class="w-full h-full" style="position: absolute;top: 0;left: 0;opacity: 0;" open-type="share"
                    @tap.stop="giveALike"></button>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="uploadPhoto_waterfall_list_bottom_icon flex flex-column align-center" style="position: relative"
                @click.stop="sharePhoto">
            <image class="uploadPhoto_waterfall_list_bottom_icon_image"
                   :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`"></image>
            <text class="uploadPhoto_waterfall_list_bottom_icon_text mt_6">分享</text>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <!-- 相册评论列表 -->
    <commentList :is_share="page.options.is_share != 1" width="656rpx" :commentsList="photo.detail.comments"
                 @topLevelReplies="topLevelReplies"
                 @secondLevelReplies="secondLevelReplies" @delCommentById="delCommentById"
                 :isPhoto="true"></commentList>
    <view class="hW_200"></view>
    <!--  照片发布评论  -->
    <view class="photoDetails_comments flex align-center justify-between z_10" :style="{
      bottom:page.commentsHeight+'px'
    }" v-if="page.options.is_share != 1">
      <view class="ml_24 photoDetails_comments_left">
        <uni-easyinput type="textarea"
                       class="photoDetails_comments_left_input"
                       v-model="page.commentsValue"
                       :focus="page.commentsFocus"
                       placeholder="评论"
                       :adjust-position="false"
                       maxlength="200"
                       autoHeight
                       :clearable="false"
                       cursorSpacing="15"
        ></uni-easyinput>
      </view>
      <view class="photoDetails_comments_right mr_24 flex align-center justify-center" :style="{
       background: page.commentsValue == '' ? '#9F9F9F' : '#FF6D00'
      }" @click.stop="debounce(photoComments,500,true)">
        <text class="photoDetails_comments_right_text">完成</text>
      </view>
    </view>

    <!-- #ifdef H5 -->
    <view v-if="page.showShareGuide"
          class="guide-wrap"
          @click.stop="page.showShareGuide = false"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
  import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue';
  import { onLoad, onShow, onShareAppMessage, onReady, onUnload } from '@dcloudio/uni-app';
  import sheep from '@/sheep';
  import HeaderTitle from '@/pages/family/components/headerTitle.vue';
  import dayjs from 'dayjs';
  import { showAuthModal } from '@/sheep/hooks/useModal';
  import debounce from '@/sheep/helper/debounce';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import commentList from '@/pages/family/components/commentList.vue';
  import { h5_url } from '@/sheep/config';

  const { proxy } = getCurrentInstance();

  const page = reactive({
    options: {},
    headHeight: 0,
    scrollLeft: 0,
    selectImage: 0,
    selectImageCurrent: 0,
    commentsHeight: 0,
    commentsValue: '',
    commentsFocus: false,
    showShareGuide: false,
  });
  const family = reactive({
    detail: {},
    imagesList: [],
    imageDetail: {},
    showGif: false,
  });
  const photo = reactive({
    detail: {},
  });
  // 获取相册评论参数
  const imageListParams = reactive({
    page: 1,
    pagesize: 10,
    total: 0,
  });

  const sq_image_path = computed(() => sheep.$store('AI').sq_image_path);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const isLogin = computed(() => sheep.$store('user').isLogin);
  const bind_id = computed(() => sheep.$store('AI').bind_id);


  onLoad((options) => {
    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }
    page.options = options;
    uni.onKeyboardHeightChange(onKeyboardHeightChange);
  });

  onReady(async () => {
    let obj = {};
    obj = page.options;
    // #ifdef H5
    sheep.$platform.share.updateShareInfo({
      title: '拾亲',
      desc: ``,
      link: `${h5_url}/#/pages/family/photoDetails?id=${obj.id}&is_flag=${obj.is_flag}&name=${obj.name}&member_id=${obj.member_id}&index=${obj.index}&type=${obj.type}&is_share=${1}&is_detail=${obj.is_detail}&family_id=${obj.family_id}`,
      image: `${h5_url}/static/fenxiang_icon.png`,
    });
    // #endif
    // 获取家庭详情
    await getFamilyDetail();
    // 获取照片详情
    await getImageList();
    // 获取评论列表
    await getPhotoComments();
  });
  onShow(async () => {
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }
  });

  onUnload(() => {
    uni.$emit('giveALike_photo', {
      type: 'close',
    });
  });

  function getPageHeight(number) {
    page.headHeight = number;
  }

  // 获取家庭详情
  async function getFamilyDetail() {
    const { data } = await sheep.$api.family.getFamilyCulture({
      family_id: page.options.family_id,
      member_id: page.options.member_id,
    });
    family.detail = data;
  }

  // 获取全部图片
  // 获取当前选中的信息
  async function getImageList() {
    const { data } = await sheep.$api.family.getFamilyImageDetail({
      id: page.options.id,
      member_id: page.options.member_id,
      family_id: page.options.family_id,
    });
    data.img_list.forEach((item, index) => {
      item.type = 'image';
      family.imagesList.push(item);
      if (item.id == page.options.id) {
        page.selectImage = index;
        page.selectImageCurrent = index;
      }
    });
    family.imageDetail = data;
    photo.detail = data;
  }

  // 获取当前选择的照片信息
  async function getImageDetail(id) {
    const { data } = await sheep.$api.family.getFamilyImageDetail({
      id: id,
    });
    photo.detail = data;
    await getPhotoComments();
  }

  function selectImageChange(index) {
    page.selectImageCurrent = index;
    page.selectImage = index;
    getImageDetail(family.imageDetail.img_list[page.selectImage].id);
    setTimeout(() => {
      moveTo(index);
    }, 10);
  }

  function swiperImageChange(e) {
    selectImageChange(e.detail.current);
  }

  const familyMembersProfileListScroll = reactive({
    width: 0,
    allWidth: 0,
    selectWidth: 0,
    scrollLeft: 0,
  });
  watch(familyMembersProfileListScroll, (newVal, oldVal) => {
    familyMembersProfileListScroll.scrollLeft = newVal.allWidth - newVal.width / 2 + newVal.selectWidth / 2;
  });

  function moveTo(index) {
    const query = uni.createSelectorQuery().in(proxy);
    query.select('.photoDetails_scrollView_all_content').boundingClientRect(data => {
      familyMembersProfileListScroll.width = data.width;
    }).exec();
    query.select('#photoDetails_scrollView_all_content_photoContent_list').boundingClientRect(rect => {
      const rpx = uni.getSystemInfoSync().windowWidth / 750;
      familyMembersProfileListScroll.selectWidth = rect.width + (8 * rpx);
    }).exec();
    query.selectAll('.photoDetails_scrollView_all_content_photoContent_list').boundingClientRect(rect => {
      if (rect.length > 0) {
        const rpx = uni.getSystemInfoSync().windowWidth / 750;
        familyMembersProfileListScroll.allWidth = 0;
        rect.forEach((item, i) => {
          if (i < index) {
            familyMembersProfileListScroll.allWidth += (Number(item.width) + (8 * rpx));
          }
        });
      }
    }).exec();
  }

  function previewImage(index) {
    let arr = [];
    family.imagesList.forEach(item => {
      arr.push(item.image);
    });
    uni.previewImage({
      current: index,
      urls: arr,
    });
  }

  async function setCover() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    console.log(photo.detail.family_cover);
    const res = await sheep.$api.family.setCover({
      type: page.options.is_flag != 1 ? 1 : 2,
      id: photo.detail.id,
      family_id: page.options.family_id,
      member_id: page.options.member_id,
      is_cover: page.options.is_flag != 1 ? (photo.detail.family_cover == 1 ? 0 : 1) : (photo.detail.person_cover == 1 ? 0 : 1),
    });

    if(res.code == 1){
      if(page.options.is_flag != 1){
          photo.detail.family_cover = photo.detail.family_cover == 1 ? 0 : 1;
      }else{
        if (res.code == 1) {
          photo.detail.person_cover = photo.detail.person_cover == 1 ? 0 : 1;
        }
      }
    }
    // await getImageDetail(photo.detail.id);
    // if (page.options.is_flag != 1) {
    //   family.imageDetail.img_list[family.selectImage].family_cover = family.imageDetail.img_list[family.selectImage].family_cover == 1 ? 0 : 1;
    // } else {
    //   family.imageDetail.img_list[family.selectImage].poster_cover = family.imageDetail.img_list[family.selectImage].poster_cover == 1 ? 0 : 1;
    // }
  }

  async function photoLikes() {
    if (!isLogin.value) {
      showAuthModal();
      return;
    }
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    const { data } = await sheep.$api.family.like({
      type: 2,
      comment_id: photo.detail.id,
    });
    uni.$emit('giveALike_photo', {
      type: 'giveALike',
      id: photo.detail.id,
    });
    photo.detail.like_count++;
    photo.detail.is_like = 1;
    photo.detail.showGif = true;
    if (!!photo.detail.timeOut) {
      clearTimeout(photo.detail.timeOut);
    }
    photo.detail.timeOut = setTimeout(() => {
      photo.detail.showGif = false;
    }, 1000);
  }

  // 相册评论
  async function photoComments() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    await sheep.$api.family.addComment({
      content: page.commentsValue,
      comment_id: photo.detail.id,
      type: 2,
    });
    uni.$emit('giveALike_photo', {
      type: 'commit',
      id: photo.detail.id,
    });
    page.commentsValue = '';
    // 获取照片详情
    // await getImageList();
    photo.detail.comment_count++;
    // 获取评论列表
    await getPhotoComments();
  }

  // 获取相册评论
  async function getPhotoComments() {
    const { data } = await sheep.$api.family.getCommentList({
      comment_id: photo.detail.id,
      type: 2,
      page: imageListParams.page,
      page_size: imageListParams.pagesize,
    });
    imageListParams.total = data.count;
    photo.detail.comments = data.list;
  }

  // 删除照片
  async function deleteCover() {
    const { code, msg } = await sheep.$api.family.checkAuth({
      family_id: page.options.family_id,
      action: 'add',
    });
    if (code != 1) {
      sheep.$helper.toast(msg);
      return;
    }
    uni.showModal({
      title: '删除照片',
      content: '是否删除该照片',
      success: async (res) => {
        if (res.confirm) {
          const { code, msg } = await sheep.$api.family.delFamilyImage({
            id: photo.detail.id,
            type: page.options.is_flag != 1 ? 2 : 1,
          });
          if (code == 1) {
            sheep.$helper.toast('删除成功');
            uni.$emit('deletePicture', photo.detail.id);
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          } else {
            sheep.$helper.toast(msg);
          }
        }
      },
    });
  }

  function onKeyboardHeightChange(res) {
    const { height, duration } = res;
    // 键盘弹起
    if (height > 0) {
      page.commentsHeight = height;
    }
    // 键盘收回
    else {
      page.commentsHeight = height;
    }
  }

  onShareAppMessage(() => {
    let obj = {};
    obj = page.options;
    let name = '';
    if (obj.is_flag == 1) {
      name = page.options.name;
    } else {
      name = family.detail.name;
    }
    return {
      title: `${name}相册`,
      path: `/pages/family/photoDetails?spid=${sheep.$store('user').userInfo.uid}}id=${photo.detail.id}&is_flag=${obj.is_flag}&name=${obj.name}&member_id=${obj.member_id}&index=${obj.index}&type=${obj.type}&is_share=${1}&is_detail=${obj.is_detail}&family_id=${obj.family_id}`,
    };
  });

  function sharePhoto() {
    // #ifndef APP-PLUS
    page.showShareGuide = true;
    // #endif

    // #ifdef APP-PLUS
    let obj = {};
    obj = page.options;
    sheep.$platform.share.shareAPP({
      title: `${family.detail.name}相册`,
      desc: '再小的家庭-也要有传承',
      link: `pages/family/photoDetails?id=${obj.id}&is_flag=${obj.is_flag}&name=${obj.name}&member_id=${obj.member_id}&index=${obj.index}&type=${obj.type}&is_share=${1}&is_detail=${obj.is_detail}&family_id=${obj.family_id}`,
      image: `${h5_url}/static/shiqin_transparent_icon.png`,
    });
    // #endif
  }
</script>


<style scoped lang="scss">
  .photoDetails_headerTitle {
    position: absolute;
    bottom: -26rpx;
    left: 50%;
    transform: translateX(-50%);

    .photoDetails_headerTitle_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #A0A0A0;
    }
  }

  .photoDetails_browseImage {
    width: 702rpx;

    .photoDetails_browseImage_image {
      width: 702rpx;
    }

    .photoDetails_browseImage_tips {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10rpx;

      .photoDetails_browseImage_tips_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #292929;
      }
    }

    .photoDetails_browseImage_swiper {
      width: 702rpx;

      ::v-deep .u-indicator-item-number {
        font-size: 20rpx !important;
      }
    }
  }

  .photoDetails_scrollView {
    width: 656rpx;
    border-bottom: 2rpx solid #707070;

    .photoDetails_scrollView_all {
      .photoDetails_scrollView_all_leftImage {
        width: 25rpx;
        height: 25rpx;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
      }

      .photoDetails_scrollView_all_content {
        width: 582rpx;
        white-space: nowrap;
        overflow: hidden;

        .photoDetails_scrollView_all_content_photoContent_list {
          display: inline-block;
          width: 60rpx;
          height: 60rpx;
          background: #FFFFFF;
          border: 1rpx solid #707070;
          margin: 0 4rpx;

          .photoDetails_scrollView_all_content_photoContent_list_image {
            width: 60rpx;
          }
        }
      }

      .photoDetails_scrollView_all_rightImage {
        width: 25rpx;
        height: 25rpx;
      }
    }
  }


  .photoDetails_details {
    width: 656rpx;
    overflow: hidden;

    .photoDetails_details_setCover {
      width: 143rpx;
      height: 43rpx;
      background: #FF4206;
      border-radius: 40rpx 40rpx 40rpx 40rpx;

      .photoDetails_details_setCover_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 22rpx;
        color: #FFFFFF;
      }
    }

    .photoDetails_details_bottom {
      .photoDetails_details_bottom_left {
        .photoDetails_details_bottom_left_name {
          .photoDetails_details_bottom_left_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #292929;
          }

          .photoDetails_details_bottom_left_name_label {
            width: 66rpx;
            height: 30rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            .photoDetails_details_bottom_left_name_label_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }
        }

        .photoDetails_details_bottom_left_time {

          .photoDetails_details_bottom_left_time_content {
            .photoDetails_details_bottom_left_time_content_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #898989;
            }
          }

          .photoDetails_details_bottom_left_time_delete {
            .photoDetails_details_bottom_left_time_delete_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 22rpx;
              color: #898989;
            }
          }
        }
      }

      .photoDetails_details_bottom_right {
        .uploadPhoto_waterfall_list_bottom_icon {
          .uploadPhoto_waterfall_list_bottom_icon_image {
            width: 35rpx;
            height: 35rpx;
          }

          .uploadPhoto_waterfall_list_bottom_icon_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }
      }
    }
  }


  .photoDetails_comments {
    width: 750rpx;
    background: #FFFFFF;
    padding: 22rpx 0 42rpx 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    .photoDetails_comments_left {
      width: 577rpx;
      //height: 80rpx;
      background: #FFFFFF;

      ::v-deep .uni-easyinput__content-textarea {
        min-height: 40rpx;
        max-height: 150rpx;
      }
    }

    .photoDetails_comments_right {
      width: 115rpx;
      height: 80rpx;
      background: #9F9F9F;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      //border: 1rpx solid #707070;

      .photoDetails_comments_right_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 23rpx;
        color: #FFFFFF;
      }
    }
  }

  .listOfReviews {
    width: 656rpx;

    .likeList {
      .likeList_image {
        width: 21rpx;
        height: 21rpx;
      }

      .likeList_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #656565;
      }
    }
  }

  .listOfReviews {

  }

  .gif {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 60rpx;
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>
